<style scoped></style>

<template>
    <div>
        <Modal
            title="添加团购类型"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="500"
        >
            <Form ref="groupBuyTypeForm" label-position="top" :rules="groupBuyTypeRole" :model="groupBuyType">
                <FormItem label="类型名称" prop="name">
                    <Input v-model="groupBuyType.name" :maxlength="32"></Input>
                </FormItem>
                <FormItem label="成团人数" prop="needCount">
                    <Input v-model="groupBuyType.needCount">
                        <span slot="append">人</span>
                    </Input>
                </FormItem>
                <FormItem label="团长获利" prop="chiefProfit">
                    <Input v-model="groupBuyType.chiefProfit">
                        <span slot="append">元</span>
                    </Input>
                </FormItem>
                <FormItem label="参团获利" prop="memberProfit">
                    <Input v-model="groupBuyType.memberProfit">
                        <span slot="append">元</span>
                    </Input>
                </FormItem>
                <FormItem label="成团期限" prop="dayLimit">
                    <Input v-model="groupBuyType.dayLimit">
                        <span slot="append">天</span>
                    </Input>
                </FormItem>
                <FormItem prop="info" label="类型说明">
                    <Input type="textarea" v-model="groupBuyType.info"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import GroupBuyType from "@/store/entities/buyType/GroupBuyType";
@Component({
    components: { }
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    groupBuyType: GroupBuyType = new GroupBuyType();

    editorBlur(filedName) {
        (this.$refs.groupBuyTypeForm as any).validateField(filedName);
    }
    save() {
        (this.$refs.groupBuyTypeForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await this.$store.dispatch({
                    type: "groupBuyType/create",
                    data: this.groupBuyType
                });
                
                this.groupBuyType = new GroupBuyType();

                setTimeout(() => {
                    (this.$refs.groupBuyTypeForm as any).resetFields();
                }, 1000);

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.groupBuyTypeForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }

    groupBuyTypeRole = {
        name: [
            {
                required: true,
                message: "请输入类型名称",
                trigger: "blur"
            },
            {
                type: "string",
                max: 32,
                message: "类型名称不得超过32个字符",
                trigger: "blur"
            }
        ],
        needCount: [
            {
                pattern: /^\d+$/,
                message: "格式不正确",
                trigger: "blur"
            }
        ],
        chiefProfit: [
            {
                pattern: /^\d+$/,
                message: "格式不正确",
                trigger: "blur"
            }
        ],
        memberProfit: [
            {
                pattern: /^\d+$/,
                message: "格式不正确",
                trigger: "blur"
            }
        ],
        dayLimit: [
            {
                pattern: /^\d+$/,
                message: "格式不正确",
                trigger: "blur"
            }
        ]
    };
}
</script>